<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器(二)——内容选择器</title>
    <style type="text/css">
        table,td{
            border: 1px solid;
            border-collapse: collapse;/*细边框*/
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>jQuery内容选择器获取元素示例一</legend>
        <div>
            <h3>XDP</h3>
        </div>
        <div>
            <span>NYL</span>
        </div>
        <div>
            <p>NYL</p>
        </div>

        <div>
            <h2>GACL</h2>
        </div>
        <div>
            <p>XDP</p>
        </div>
    </fieldset>
    <fieldset>
        <legend>jQuery内容选择器获取元素示例二</legend>
        <table>
            <tr>
                <td id="td1"></td>
                <td>第一行第二列</td>
                <td>第一行第三列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td id="td2"></td>
                <td>第二行第三列</td>
            </tr>
            <tr>
                <td>第三行第一列</td>
                <td>第三行第二列</td>
                <td id="td3"></td>
            </tr>
        </table>
    </fieldset>
    <fieldset>
        <legend>jQuery内容选择器获取元素示例三</legend>
        <div id="div1" style="display: block;width: 100%;height: 100px;border: 1px solid red;"></div>
        <div id="div2" style="display: block;width: 100%;height: 100px;border: 1px solid greenyellow;">
           我是有文本内容的div2
        </div>
        <div id="div3" style="display: block;width: 100%;height: 100px;border: 1px solid blue;"></div>
        <div id="div4" style="display: block;width: 100%;height: 100px;border: 1px solid green;">
            我是有文本内容的div4
        </div>
        <p style="text-align: center;">
            <button id="btn1">删除内容为空的div</button>
            <button id="btn2">删除内容不为空的div</button>
        </p>
    </fieldset>
</body>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
         *      //页面加载完成后的处理，固定写法
         * });
     *
     */
    $(function () {
        /******************************************jQuery内容选择器获取元素代码*****************************************************/
        var eleArr1 = $("div:contains('NYL')");//获取包含NYL文本的div元素
        console.log(eleArr1);//打印获取到的元素

        var eleArr2 = $("div:has(p)");//获取包含p标签的div元素
        console.log(eleArr2);//打印获取到的元素

        var tdArr1 = $("td:empty");//获取不包含子元素或者文本的空的td元素
        console.log(tdArr1);

        var tdArr2 = $("td:parent");//获取含有子元素或者文本的td元素
        console.log(tdArr2);
        /******************************************jQuery内容选择器获取元素代码*****************************************************/

        $("#btn1").on("click",function () {
            var divArr1 = $("div:empty");//获取不包含子元素或者文本的空的div元素
            console.log(divArr1);
            //jquery提供的for循环方法
            $.each(divArr1,function (i,item) {
                item.remove();//删除被选元素（及其子元素）
            })
        });

        $("#btn2").on("click",function () {
            var divArr2 = $("div:parent");//获取含有子元素或者文本的div元素
            console.log(divArr2);
            //原生js的for循环
            for(var i=0;i<divArr2.length;i++){
                divArr2[i].remove();//删除被选元素（及其子元素）
            }
           /* $.each(divArr2,function (i,item) {
                item.remove();//删除被选元素（及其子元素）
            })*/
        });
    });
</script>
</html>